<div class="content">
    <div id="example_title">
        <h1>Node Handles</h1>
        Node handles are controls displayed on the left from the nodes. They are not indented as do nested nodes.
        Handles could be used as line numbers or breakpoints in debugging.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="sidebar" style="height: 400px; width: 200px; float: left"></div>
<div style="margin-left: 220px;">
</div>
<style>
.w2ui-sidebar[name=sidebar] .w2ui-node-handle > div {
    width: 11px;
    height: 11px;
    border-radius: 10px;
    margin-left: 4px;
    margin-top: 6px;
    background-color: #e1e1e1;
    border: 1px solid transparent;
}
.w2ui-sidebar[name=sidebar] .w2ui-node-handle > div:hover {
    border: 1px solid #55ca2e
}
.w2ui-sidebar[name=sidebar] .w2ui-node-handle > div.bp-set {
    background-color: #55ca2e;
    border: 1px solid #55ca2e
}
</style>
<div style="clear: both"/>

<!--CODE-->
<script type="module">
import { w2sidebar, query } from '__W2UI_PATH__'

let bp = ['level-1-1-2', 'level-1-2-3', 'level-1-2-2']
let sidebar = new w2sidebar({
    box: '#sidebar',
    name: 'sidebar',
    handle: {
        width: 20,
        text: `<div class="break-point"></div>`, // can be a function
        tooltip(node) {
            return `Set at "${node.text}"`
        },
        onClick(node, event) {
            this.setBreakPoint(event.target)
        }
    },
    nodes: [
        { id: 'level-1-1', text: 'Level 1.1', icon: 'fa fa-folder-o', expanded: true,
            nodes: [
                { id: 'level-1-1-1', text: 'Level 1.1.1', icon: 'fa fa-star-o', count: 5 },
                { id: 'level-1-1-2', text: 'Level 1.1.2', icon: 'fa fa-star-o', count: 6 },
                { id: 'level-1-1-3', text: 'Level 1.1.3', icon: 'fa fa-star-o', count: 12 }
            ]
        },
        { id: 'level-1-2', text: 'Level 1.2', icon: 'fa fa-folder-o', expanded: true,
            nodes: [
                { id: 'level-1-2-1', text: 'Level 1.2.1', icon: 'fa fa-star-o' },
                { id: 'level-1-2-2', text: 'Level 1.2.2', icon: 'fa fa-star-o' },
                { id: 'level-1-2-3', text: 'Level 1.2.3', icon: 'fa fa-star-o' }
            ]
        },
        { id: 'level-1-3', text: 'Level 1.3', icon: 'fa fa-folder-o', expanded: true,
            nodes: [
                { id: 'level-1-3-1', text: 'Level 1.3.1', icon: 'fa fa-star-o' },
                { id: 'level-1-3-2', text: 'Level 1.3.2', icon: 'fa fa-star-o' },
                { id: 'level-1-3-3', text: 'Level 1.3.3', icon: 'fa fa-star-o' }
            ]
        }
    ],
    setBreakPoint(el) {
        let stepId = query(el).closest('.w2ui-node').attr('id').substr(5)
        if (bp.indexOf(stepId) != -1) {
            bp.splice(bp.indexOf(stepId), 1)
            query(el).removeClass('bp-set')
        } else {
            bp.push(stepId)
            query(el).addClass('bp-set')
        }
        event.preventDefault()
        event.stopPropagation()
    },
    onRefresh(event) {
        event.done(() => {
            let node = query('#node_' + event.target + ' .w2ui-node-handle > div')
            if (bp.indexOf(event.target) == -1) {
                node.removeClass('bp-set')
            } else {
                node.addClass('bp-set')
            }
        })
    }
})

sidebar.render('#sidebar')
</script>
